YuIndex 网页终端
快来分享你的内容吧～
项目 #前端# 😈一个晚来的作业 hhh 由于是主攻前端, 因此就把星球上的 yuIndex 拿来学习啦~~ 很感谢鱼皮, 在看源码的过程中学到了不少东西~~ 在线访问 : https://www.weirdo-terminal.com/ (仅支持 pc 端哈) github 地址 : https://github.com/2WeirDo/weirdo_terminal ( README 中有写项目详情哈~~) ⭐在此基础上也拓展了些新功能 ~~ 1. hot --- 获取各平台当日热榜信息 2. analyze --- 网站技术分析 3. gpt --- chatGPT 3.5 (目前访问不了, 推荐 bot 访问文心一言) 4. bot --- 文心一言 ERNIT-Bot 服务 5. theme --- 主题变换 6. weather --- 查看天气 7. film --- 获取当日热门电影 8. dujitang --- 获取每日毒鸡汤 9. love --- 获取一句情话 10. inspire --- 获取励志句子 ⭐修改了一些模块 1. 修复了输入框不能输入空格的问题 2. 修复了异步操作后光标不显示的问题 3. 修复 background 命令背景图未铺满问题 4. 删除不常用的搜索引擎, 并添加了一些 5. 包管理工具改为 pnpm 4. 重构项目为 ES Module 模块 5. 使用 Sass 重构 CSS 6. 使用路径别名@ 快速导入相关模块 7. 修改了一下项目目录结构 前端使用 vercel 部署, 后端使用微信云托管部署~
经过一段时间的学习，算是把yuindex的整个运行过程了解的差不多了，大多数功能都已经实现。 我也整理了一份笔记分享给大家，从项目初始化到可能遇到的问题，以及命令组成，同时记录了快捷键等一些功能的实现，可能记得不是很清楚，毕竟这是我第一次记录这种分享出来的笔记[捂脸]。笔记的不足欢迎大家指出来，我会记录下来，下次改正。 同时还要感谢@周三不Coding 大佬对我的帮助，没有他的帮助理解起来挺麻烦的
极客范儿的游览器终端直播笔记-下
<html> <head></head> <body> <div class="content ql-editor"> <p><strong>提示</strong></p> <p>本项目，适合学习完前端三件套，会一点node或者后端知识，学过并使用过vue3的同学，如果刚刚学习前端，没有任何前端框架基础，可能会听不懂</p> <p><strong>需要使用的文档</strong></p> <ul> <li>ant design vue：<a href="https://antdv.com/components/overview" target="_blank">https://antdv.com/components/overview</a></li> <li>vue3：<a href="https://v3.cn.vuejs.org" target="_blank">https://v3.cn.vuejs.org/</a></li> <li>vite：<a href="https://cn.vitejs.dev" target="_blank">https://cn.vitejs.dev/</a></li> <li><a href="http://node.js" target="_blank">node.js</a>：<a href="http://nodejs.cn/api" target="_blank">http://nodejs.cn/api/</a></li> <li>express-session：<a href="https://www.cnblogs.com/loaderman/p/11506682.html" target="_blank">https://www.cnblogs.com/loaderman/p/11506682.html</a></li> <li>express：菜鸟教程</li> <li>pinia:<a href="https://pinia.web3doc.top" target="_blank">https://pinia.web3doc.top/</a></li> <li>sequelize中文文档：<a href="https://www.sequelize.com.cn" target="_blank">https://www.sequelize.com.cn/</a></li> </ul> <p><strong>时间线</strong></p> <ul> <li>0- 54分钟： 上次直播内容回顾，复习，系统的讲解源码</li> <li class="ql-indent-1">0-5分钟：举例说明输出组件ContentOutput的逻辑</li> <li class="ql-indent-1">5分钟-10分钟：介绍todo组件，pinia状态管理库</li> <li class="ql-indent-1">11分钟-14分钟：hint文件，命令提示功能，history文件 ，历史命令模块。使用Composition API封装的自定义hooks，企业开发中如何快速完成需求</li> <li class="ql-indent-1">15分钟-25分钟：用户输入一个命令，到相应发生了什么？</li> <li class="ql-indent-1">25分钟-47分钟：命令系统讲解</li> <li class="ql-indent-1">47分钟- 54分钟：历史命令系统，上下翻功能，历史列表功能</li> <li>54+ ：讲解一些设计，</li> <li class="ql-indent-1">54分钟-1小时：微终端的操作接口，用于限制，<a href="https://v3.cn.vuejs.org/api/sfc-script-setup.html#defineexpose" target="_blank">https://v3.cn.vuejs.org/api/sfc-script-setup.html#defineexpose</a></li> <li>1小时-1小时9分钟：举例，如何写一个自定义命令，讲了参数和选项，和linux一样，自定义一个命令流程：</li> <li class="ql-indent-2">在core的commands下新建一个文件夹，写自己的命令逻辑</li> <li class="ql-indent-1">写好后，去<a href="http://commandRegister.ts" target="_blank">commandRegister.ts</a>去引入或者说注册进来我们的自定义命令</li> <li>1小时9分钟- ：</li> <li class="ql-indent-2">-1小时16分钟：子父命令，利用递归实现</li> <li class="ql-indent-2">-1小时18分钟：帮助功能，</li> <li class="ql-indent-1">-1小时18分钟：状态管理pinia，保存到localStorage</li> <li class="ql-indent-1">1小时18分钟- 1小时27分钟：后端代码阅读</li> <li class="ql-indent-1">1小时27分钟-1小时32分钟：思路扩展</li> <li class="ql-indent-1">1小时32分钟-END：项目亮点，用于简历</li> </ul> <p><strong>跟着视频 我做了什么</strong></p> <ol> <li>安装mysql，redis 跑起来前后端代码</li> <li>跟着鱼皮，看源码，调试源码</li> </ol> <p><strong>源码阅读</strong></p> <p><strong>前端</strong></p> <p><strong>页面逻辑</strong></p> <p>src >components >yu-terminal ><a href="http://ContentOutput.vue" target="_blank">ContentOutput.vue</a></p> <blockquote> 对结果进行展示的组件，可展示组件类型：文字，命令，组件,"command" | "text" | "component" </blockquote> <p>该页面逻辑：通过对输出类型（<a href="http://output.type" target="_blank">output.type</a> ）判断，动态显示对应内容，负责输出各种结果</p> <p>src >components >yu-terminal > <a href="http://hint.ts" target="_blank">hint.ts</a> ：提示功能模块</p> <p>src >components >yu-terminal > history,ts：历史命令模块</p> <p>src >components >yu-terminal > <a href="http://shortcuts.ts" target="_blank">shortcuts.ts</a>：快捷键系统</p> <p>src >components >yu-terminal > <a href="http://YuTerminal.vue" target="_blank">YuTerminal.vue</a>：微终端组件</p> <blockquote> 页面包括最外面的盒子，用于切换背景，里面包裹一个滚动的盒子，里面包裹循环输出列表模块，里面放着可折叠模块和不可折叠模块，下面就是输入模块，下面就是提示模块 </blockquote> <ul> <li>！加历史命令索引，快速执行历史命令</li> <li>为什么要把用户提交命令后做的事情，放在indexpage文件中定义？这样易于扩展，其实这是一种组件开发思维吧！就是组件内部暴露一个属性，这个属性接收一个函数，组件就可以调用组件实例的传进来的自定义方法，提高组件的灵活性</li> </ul> <p>src >core><a href="http://commandExecutor.ts" target="_blank">commandExecutor.ts</a>：命令的解析和执行</p> <p>src >core><a href="http://commandRegister.ts" target="_blank">commandRegister.ts</a>：所有命令存放的地方</p> <p>后面就没有记录了</p> <p><strong>后端</strong></p> <p>目录</p> <p>config：定义配置</p> <p>constant：定义常量</p> <p>controller：请求层，处理用户请求</p> <p>exception：接口报错定义</p> <p>model：用户模型，操作数据库</p> <p>service：业务逻辑层，具体做什么事情</p> <p>thirdpart：第三方API,百度翻译，随机获取背景（新浪-搏天）</p> <p><a href="http://db.js" target="_blank">db.js</a>：创建数据库实例并连接数据库</p> <p><a href="http://index.js" target="_blank">index.js</a>：入口文件</p> <p><a href="http://routes.js" target="_blank">routes.js</a>：定义接口，给前端使用，和controller文件</p> <p><a href="http://server.js" target="_blank">server.js</a>：后端具体服务</p> <p><strong>具体技术</strong></p> <ul> <li>vue自定义组件component标签，参考文章：<a href="https://v3.cn.vuejs.org/api/built-in-components.html#component" target="_blank">https://v3.cn.vuejs.org/api/built-in-components.html#component</a></li> <li>vue的defineProps:<a href="https://v3.cn.vuejs.org/api/sfc-script-setup.html#%E4%BD%BF%E7%94%A8%E8%87%AA%E5%AE%9A%E4%B9%89%E6%8C%87%E4%BB%A4" target="_blank">https://v3.cn.vuejs.org/api/sfc-script-setup.html#%E4%BD%BF%E7%94%A8%E8%87%AA%E5%AE%9A%E4%B9%89%E6%8C%87%E4%BB%A4</a></li> <li>defineAsyncComponent：创建一个只有在需要才会加载的异步组件</li> <li>pinia：一个全局状态管理库，可以看成一个全局变量，更具体点就是一个全局对象，只要当前网页存在，它就存在，不会随着页面跳转，数据也没了，但是它会有额外的功能，能够监听每次数据变化，可以做额外的事情，主要用处：多个页面共享一个变量，</li> <li>父子命令逻辑：递归，</li> <li>ORM框架：<a href="https://blog.csdn.net/papima/article/details/78219000" target="_blank">https://blog.csdn.net/papima/article/details/78219000</a></li> </ul> <p><strong>编程思想</strong></p> <ul> <li>模块化的思想，整个项目，代码逻辑清晰，模块解耦的真的棒，值得好好学习</li> <li>解耦，不断解耦，抽离，封装，让通用逻辑全部都提出出来</li> <li>好的代码，是可读性很强的，尽量写通俗易懂的代码</li> </ul> <p><strong>END</strong></p> <p>整个项目的收获，</p> <ol> <li>学习到了新的vue知识，例如：异步加载组件defineAsyncComponent ，利用vue Composition API封装自己的hooks，等等</li> <li>惊叹鱼皮系统设计的巧妙，对解耦，组件化，模块化有了更深的认识，也知道了基础知识真的很重要</li> <li>学习到了如何自己从零到一做一个cool又实用的项目，</li> <li>喜欢上看官方文档，知道如何快速上手一个新的技术，就是照着官方文档跑demo</li> <li>我还需要花时间看源码，感觉还有很多东西没学到，只学到了皮毛</li> </ol> <p>最后感谢鱼皮，由衷的佩服鱼皮，我的榜样，优秀且谦虚，身上有太多我羡慕的品质，嗯 ，努力学习吧，我虽然羡慕，但是每个人都有自己的节奏，我希望我虽不能向鱼皮那样扶摇直上九万里，我也能做一个蜗牛，每天前进一点点，</p> <p><br></p> </div> </body> </html>
【直播笔记】(我叫不拖延)：YuIndex 网页终端（上）
<html> <head></head> <body> <div class="content ql-editor"> <p><strong style="color: rgb(61, 167, 66);">两晚才写出来，但是很多地方鱼皮一笔带过，我也没有细看，所有可能有不足之处希望大家指出来，共同学习，后面会仔细的看项目的源码，不是后面，就是最近哈哈哈 ，</strong></p> <p><br></p> <p><strong>web终端项目-YuIndex学习笔记</strong></p> <p><strong>项目相关网网址</strong></p> <p>项目地址：<a href="https://github.com/liyupi/yuindex" target="_blank">https://github.com/liyupi/yuindex</a></p> <p>百度api申请地址：<a href="https://fanyi-api.baidu.com" target="_blank">https://fanyi-api.baidu.com</a></p> <p>前端技术选型openbase：<a href="https://openbase.com" target="_blank">https://openbase.com/</a></p> <p>项目发布网址：<a href="https://www.yuindex.com/#/" target="_blank">https://www.yuindex.com/#/</a></p> <p>项目技术参考网站w3c：<a href="https://www.w3school.com.cn" target="_blank">https://www.w3school.com.cn/</a></p> <p>项目前端免费部署：<a href="https://vercel.com" target="_blank">https://vercel.com/</a></p> <p>项目视频及其资源（鱼总分享）：</p> <p><a href="https://wx.zsxq.com/dweb2/index/topic_detail/585181814415154" target="_blank">https://wx.zsxq.com/dweb2/index/topic_detail/585181814415154</a></p> <p><br></p> <p><strong>看完视频，我们会什么</strong></p> <ol> <li>知道这个项目是什么？ 使用什么技术实现？为什么使用这个技术？</li> <li>能够自己实现这个项目？（看完上下）</li> <li>能够基于本项目进行二次开发？（看完上下）</li> </ol> <p><br></p> <p><strong>视频时间线</strong></p> <ol> <li>0-8分钟:项目基本介绍，项目的由来及其未来</li> <li>8-12分钟：项目优势，</li> <li>12-16分钟:项目产生背景</li> <li>16-22分钟：项目开发周期 & 项目开发流程</li> <li>22-1小时4分钟：开发每个过程的具体工作 + 技术选型+部署等等</li> <li>1小时4分钟-1小时30分钟：项目系统设计,设计思路，设计模式，举例说明</li> <li>1小时31分钟-2小时7分钟： 源码阅读-快速过一遍项目结构</li> <li>2小时7分钟-2小时18分钟： 源码阅读-阅读核心功能代码，例如：终端具体代码实现，代码思路</li> <li>最后： 总结说拜拜</li> </ol> <p><br></p> <p><strong>项目介绍</strong></p> <p><br></p> <p><strong>项目整体介绍</strong></p> <ul> <li>项目面向群体：程序员，经常在网页上搜索资源的群体</li> <li>项目初衷：为了一站式实现资源查找，快捷，方便，简约</li> <li>项目借鉴：借鉴了linux的命令行的思想，看似一个命令行 ，但是能做很多很多事情</li> <li>项目优势：</li> <li class="ql-indent-1">对比同类型的游览器插件，utools，它更加轻量，方便，只需要有一个游览器即可</li> <li class="ql-indent-1">不需要更新，打开永远都是最新版</li> </ul> <p><br></p> <p><strong>项目产生原因</strong></p> <p><br></p> <ol> <li>实际需求</li> <li>网上没有类似项目</li> <li>web终端并没有人关注和分享，自己做一个，开源</li> <li>帅</li> </ol> <p><br></p> <p><strong>项目开发流程</strong></p> <p><br></p> <p><strong>1. 构思+需求分析</strong></p> <ol> <li>有一个想法</li> <li>做调研，这个其实很重要，调研例如：查看竞品，去让人填表收集信息等等</li> <li>挖掘需求（从竞品中，SWOT分析：<a href="https://baike.baidu.com/item/SWOT%E5%88%86%E6%9E%90%E6%B3%95/150223" target="_blank">https://baike.baidu.com/item/SWOT%E5%88%86%E6%9E%90%E6%B3%95/150223</a>）</li> <li>排需求的优先级，非常重要</li> </ol> <p><br></p> <p><strong>2. 技术选型</strong></p> <ol> <li>选择一套技术，更快，更稳的完成我们的所有需求</li> <li>技术选型方法（前端）：</li> <li class="ql-indent-1">使用openbase：<a href="https://openbase.com" target="_blank">https://openbase.com/</a></li> <li class="ql-indent-1">游览器，例如：baidu Google bing等等</li> <li class="ql-indent-1">GitHub，npmjs.掘金技术社区等等</li> <li>使用第三方库，需要注意开源许可协议是否可以商用等等</li> </ol> <p><br></p> <p><strong>3. 开发</strong></p> <p><strong>4. 测试</strong></p> <p><strong>5. 部署上线</strong></p> <ul> <li>前端：vercel -免部署和运维</li> <li>后端：微信云托管</li> </ul> <p><br></p> <p><strong>前端技术</strong></p> <ol> <li>xtermjs的缺点 它的官网:<a href="https://github.com/xtermjs/xterm.js" target="_blank">https://github.com/xtermjs/xterm.js</a></li> <li class="ql-indent-1">项目文档缺失，社区不好，有问题，没人解决</li> <li class="ql-indent-1">它更适合开发前后端一体的终端，它是更加重视后端进行逻辑处理</li> <li>项目使用技术</li> <li class="ql-indent-1">前端：vue3 +vite2+and design vue3+ pinia+ts+eslint+prettier</li> <li class="ql-indent-1">前端引入第三方库：getopts命令参数解析库</li> </ol> <p><br></p> <p><strong>后端技术</strong></p> <blockquote><a href="http://node.js" target="_blank">node.js</a>的兼容性比较好，使用了虚拟机 </blockquote> <ol> <li>nodejs</li> <li>express+express-session</li> <li>mysql</li> <li>sequelize(ORM框架)</li> <li>Redis</li> <li>依赖服务</li> <li class="ql-indent-1">百度翻译</li> <li class="ql-indent-1">新浪壁纸</li> </ol> <p><br></p> <p><strong>项目系统设计</strong></p> <blockquote> 如何实现，个人理解，一个文字草稿纸+一个画图的草稿纸 </blockquote> <ul> <li>及时的把自己的任何想法都记录下来</li> <li>遵循马斯克的第一性原理</li> </ul> <p>使用工具：</p> <ol> <li>Markdown的文字编辑器</li> <li><a href="http://draw.io" target="_blank">draw.io</a>一个在线画图工具：<a href="http://diagrams.net" target="_blank">diagrams.net</a></li> </ol> <p>具体设计：</p> <blockquote> 微终端和命令系统属于本项目的核心模块 </blockquote> <ol> <li>微终端：打开网址前端看到的就是微终端，旗下的功能也是和终端联系紧密，具体功能：</li> <li class="ql-indent-1">历史记录</li> <li class="ql-indent-1">输入输出</li> <li class="ql-indent-1">快捷键</li> <li>操作接口：控制用户使用权限，例如不允许用户修改提示等等</li> <li class="ql-indent-2">一组可以操作终端的API（函数）</li> <li class="ql-indent-2">用于控制操作的权限</li> <li class="ql-indent-2">解耦(比如你可以通过$refs强制访问，容易出现冲突）</li> <li class="ql-indent-1">更清晰明确 需要看代码理解</li> <li class="ql-indent-1">提示</li> <li>命令系统：拿到命令，做具体的事情或者提示报错</li> <li class="ql-indent-1">注册器：把定义好的所有命令，作为一个map变量，把它注册进来，让命令系统知道，有这个命令，</li> <li class="ql-indent-1">匹配器：匹配命令，例如：baidu hhh -s 它就会匹配baidu为关键词，去注册器中找是否有这个关键词，然后去命令集中匹配命令，在此处可以做错误处理</li> <li class="ql-indent-1">解析器：把字符串解析为js对象。我们输入的是一串字符串，它会帮我们解析为更加通用的对象，用于后面去使用</li> <li class="ql-indent-1">执行器：调用子命令的执行函数，执行命令对应的具体的工作</li> <li class="ql-indent-1">子命令：独立的模块，命令支持递归的解析，看代码理解</li> <li>命令集：更加具体的某个功能，具体某个命令对应的代码</li> <li class="ql-indent-1">空间系统</li> <li class="ql-indent-1">搜索</li> <li class="ql-indent-1">用户系统</li> <li class="ql-indent-1">终端控制（帮助，历史等等)</li> <li class="ql-indent-1">其他 等等</li> <li><strong>设计模式</strong></li> <li>命令模式：<a href="https://www.runoob.com/design-pattern/command-pattern.html" target="_blank">https://www.runoob.com/design-pattern/command-pattern.html</a></li> <li>操作接口</li> </ol> <p><br></p> <p><strong>项目源码阅读</strong></p> <ol> <li>通过readme快速了解项目</li> <li>下载下来，在中途中，在项目页按下句号键，会打开一个网页版的vscode，可以快速看一下项目</li> <li>号外：web IDE也是前端热门</li> <li>本地运行</li> <li>下载依赖，看<a href="http://package.json" target="_blank">package.json</a></li> <li>如果你的项目跑不起来，那么可能是你的电脑环境不符合项目需求，例如node版本低了等等</li> <li>具体代码模块</li> <li class="ql-indent-1">项目下server包就是后端项目代码，</li> <li>启动后端方法</li> <li class="ql-indent-2">下载依赖，讲解了本地环境和线上环境区别</li> <li>后端项目下的config文件夹下的代码作用</li> <li class="ql-indent-3">config文件：本地环境配置文件</li> <li class="ql-indent-2">getConfig文件：获取当前的环境</li> <li>后端启动，</li> <li class="ql-indent-3">下载安装Redis</li> <li class="ql-indent-3">安装MySQL数据库</li> <li class="ql-indent-1">创建数据库，有<a href="http://ddl.sql" target="_blank">ddl.sql</a> 建表代码</li> </ol> <p><br></p> <ol> <li><strong>前端项目解读</strong></li> <li class="ql-indent-1">.vscode：vite脚手架自动生成，用于配置vscode编辑器配置，例如提示插件等等</li> <li class="ql-indent-1">doc ：存放文档和图片</li> <li class="ql-indent-1">node_modules：对应<a href="http://package.json" target="_blank">package.json</a>的依赖包</li> <li class="ql-indent-1">public： 用于存放项目静态资源，项目不需要打包工具打包的文件存放地方</li> <li class="ql-indent-1">server： 后端代码</li> <li class="ql-indent-1">src： 项目核心代码（源码）</li> <li class="ql-indent-1"><a href="http://.eslintrc.js" target="_blank">.eslintrc.js</a>：配置项目eslint规范，用于项目规范，自动提示等等，团队开发非常重要，能够大大提高代码质量和代码可读性</li> <li class="ql-indent-1">eslint不生效，解决</li> </ol> <p><img src="https://pic.code-nav.cn/planet_post_image/1619930914211520514/9f5yyw6b.jpeg"></p> <p><img src="https://pic.code-nav.cn/planet_post_image/1619930914211520514/6jsabjk2.jpeg"></p> <ol> <li class="ql-indent-1">.gitignore： 配置忽略文件</li> <li class="ql-indent-1"><a href="http://CODE_OF_CONDUCT.md" target="_blank">CODE_OF_CONDUCT.md</a>：开源贡献公约（对于项目运行效果没有影响）</li> <li class="ql-indent-1"><a href="http://components.d.ts" target="_blank">components.d.ts</a>：generated by unplugin-vue-components</li> <li class="ql-indent-1">Dockerfile： 定义镜像（容器）文件，打包构建时候使用</li> <li class="ql-indent-1"><a href="http://index.html" target="_blank">index.html</a>：项目主页文件，可修改，一些信息。如：title，修改meta用于 SEO优化</li> <li class="ql-indent-1">LICENSE： 开源许可证。记得修改版权信息</li> <li class="ql-indent-1"><a href="http://package.json" target="_blank">package.json</a>：包管理文件，脚本文件</li> <li class="ql-indent-1"><a href="http://README.md" target="_blank">README.md</a> :项目介绍文件</li> <li class="ql-indent-1"><a href="http://tsconfig.json" target="_blank">tsconfig.json</a>，<a href="http://tsconfig.node.json" target="_blank">tsconfig.node.json</a>,: 配置ts规范</li> <li class="ql-indent-1"><a href="http://vite.config.ts" target="_blank">vite.config.ts</a>:vite配置文件</li> <li class="ql-indent-1"><a href="http://yuindex-arch.drawio" target="_blank">yuindex-arch.drawio</a>；系统架构图</li> <li>前端src文件夹解析</li> <li class="ql-indent-1">components： 组件，里面放着终端，（把终端看成一个组件）对应系统设计的微终端</li> <li>config：项目配置文件夹，下面放着路由配置信息</li> <li class="ql-indent-1">隐藏任务，有失败作，xterm的demo</li> <li class="ql-indent-1">core：核心，有命令注册器，匹配器等等，还有各种命令</li> <li>pages： 页面，有主页面和xterm页面</li> <li class="ql-indent-1">index页面：把终端组件和core连接起来</li> <li>plugins：</li> <li class="ql-indent-2">放着封装的axios，请求和相应的拦截myAxios.defaults.withCredentials = true;向后台传递cookie，用于登录功能</li> <li class="ql-indent-1">还有对dayjs库二次封装，全局设置为中文，继承了时长扩展</li> <li class="ql-indent-1">utils：工具方法，一般多处用到同样的逻辑，提取逻辑放到utils下，方便直接使用</li> <li class="ql-indent-1"><a href="http://App.vue" target="_blank">App.vue</a>：根组件</li> <li class="ql-indent-1"><a href="http://env.d.ts" target="_blank">env.d.ts</a>：环境类型声明文件</li> <li class="ql-indent-1"><a href="http://main.ts" target="_blank">main.ts</a>：项目入口文件，</li> <li>核心代码解读</li> <li>components：终端组件，</li> <li class="ql-indent-2">hint,ts : 提示，操作提示，设置提示，防抖设置提示</li> <li>history,ts：命令，上翻，下翻，查看命令当前位置</li> <li class="ql-indent-2">待完善：把历史命令数据塞到这个模块中</li> <li class="ql-indent-2"><a href="http://shortcuts.ts" target="_blank">shortcuts.ts</a>：快捷键，最简单命令系统，快捷键匹配</li> <li class="ql-indent-2"><a href="http://type.d.ts" target="_blank">type.d.ts</a>： 类型声明，声明了输出类型有，命令，文本，组件等等 其中定义的TerminalType接口，用来限制访问操作终端的权限</li> <li class="ql-indent-2"><a href="http://ContentOutput.vue" target="_blank">ContentOutput.vue</a>：内容输出，组件输出，自定义内容输出</li> <li class="ql-indent-1"><a href="http://YuTerminal.vue" target="_blank">YuTerminal.vue</a>：核心组件，也就是显示的终端，输入输出的地方</li> </ol> <p><strong>项目中的代码知识</strong></p> <ol> <li>js中的?? 和?.什么意思：<a href="https://www.cnblogs.com/zhigu/p/13962661.html" target="_blank">https://www.cnblogs.com/zhigu/p/13962661.html</a></li> <li>cross-env:一个库，让脚本代码，兼容window，mac等等系统，仅在开发环境使用</li> <li>防抖和节流，这里有一个很好的例子，就是：防抖就是打游戏中的回城，你点击回城一直点击，取消，他会计算你最后那一次的点击回城，才进行回城倒计时，节流就是点击普攻键，无论你点击的多快，他都是到了相同的间隔时间才会继续进行下一次的攻击</li> </ol> <p><strong>项目具体需求</strong></p> <ol> <li>先做一个，能够在网页端输入输出的终端</li> <li>解析命令功能，命令行</li> <li>搭建项目骨架，定规范，系统架构设计</li> <li>命令开发</li> </ol> <p><strong>项目开发中的好的编程思想（个人觉得）</strong></p> <ul> <li>在需求分析过程中，就想好如何实现它，具体使用什么技术，什么方法</li> <li>敏捷开发，个人项目，在保证核心功能，立即上线，让产品和用户互动，从而收集反馈</li> <li>项目开发之前，要先思考 项目通用的逻辑和功能，封装成全局，也就是搭建系统骨架，先设计好项目，再进行开发，也就是，先把系统用伪代码（文字 / 图）表达出来 ，再实现</li> <li>企业开发 ，如果有现成的库能完成我们的需求，一定要用现成的</li> <li>看项目源码，不要一直看readme，先把项目本地跑起来</li> <li>从代码中，可以学习到项目解耦的思想，分层，各司其职，方便阅读，方便二次创作</li> </ul> <p><strong>项目快捷命令</strong></p> <blockquote> 基本上和linux系统命令一致 ,linux命令学习： </blockquote> <blockquote> 腾讯云：<a href="https://cloud.tencent.com/developer/article/1540697" target="_blank">https://cloud.tencent.com/developer/article/1540697</a>； </blockquote> <blockquote> 菜鸟大全：<a href="https://www.runoob.com/linux/linux-command-manual.html" target="_blank">https://www.runoob.com/linux/linux-command-manual.html</a> </blockquote> <ul> <li>ctrl+o：折叠 & 展开</li> <li>historty： 查看历史命令</li> <li>ls：查看已经收藏的网页，可以把网页当成文件一样管理</li> <li>goto：快速跳转网页</li> <li>ctrl+l：清屏</li> </ul> <p><strong>END</strong></p> <p>其实，讲的都是真正在企业开发中，需要的知识，很多细节，鱼皮一笔带过，其实真的自己实现还是很麻烦，很费脑筋，也很佩服鱼皮的知识面很广,看完学到了很多前端项目的知识</p> <p><br></p> </div> </body> </html>